<template>
    <div :id="this.id" class="chartdiv" style="height: 100%;width:100%">
        <div class="edit">
            <i @click="openChart" title="编辑" class="fa fa-edit" aria-hidden="true"></i>
        </div>
        <div class="close">
            <i @click="deleteChart" title="关闭" class="fa fa-trash" aria-hidden="true"></i>
        </div>
        <div class="vue-draggable-handle">
            <i class="fa fa-arrows-alt" aria-hidden="true"></i>
        </div>
        <div v-show="isChart" :id="this.chartid" class="vue-no-draggable-handle" style="width:90%;height: 100%"></div>
        <div v-show="isTable" :id="this.tableid" style="width:100%;height: 100%;">
            <data-table :tableInData="showtableData"></data-table>
        </div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import dataTable from '../table/dataTable.vue'

    export default {
        name: "chartDiv",
        components: {
            "data-table": dataTable
        },
        props: {
            id: String,
        },
        data() {
            return {
                chartid: '',
                tableid: '',
                chartData: '',
                showchartParams: [],
                currentChartDiv: '1',
                currentChartDiv_1: '1',
                showtableData: null,
                isTable: false,
                isChart: true
            }
        },
        methods: {
            openChart(e) {
                this.$emit('openChart');
                console.log($(e.target).parent().siblings()[2].id)
                this.currentChartDiv = $(e.target).parent().siblings()[2].id;
                this.$Bus.$emit('currentChartDiv', this.currentChartDiv);
                console.log($(e.target).parent().siblings()[2].id);
            },
            deleteChart() {
                let nowElement = document.getElementById(this.id).parentElement.id;
                this.$emit('deleteSelectElement', nowElement);
            },
        },
        mounted() {
            let that = this;
            this.$Bus.$on('chartData', (e) => {
                that.chartData = e;
            });
            this.chartid = 'cha' + this.id;
            this.tableid = 'tab' + this.id;
        },
        created() {
        },
        computed: {
            chartDivParams() {
                let that = this;
                this.$Bus.$on('chartDataParams', (e) => {
                    that.showchartParams = e;
                    // this.title = e.title;
                });

                return that.showchartParams;
            },
        },
        watch: {
            chartDivParams: function () {
                if (this.chartDivParams) {
                    console.log(this.chartDivParams)
                    if (this.chartDivParams.chartsData.tooltip) {
                        const chartDiv = echarts.init(document.getElementById(this.chartDivParams.currentId));
                        ///清空画布
                        chartDiv.clear();
                        chartDiv.setOption(this.chartDivParams.chartsData);
                        window.addEventListener('resize', function () {
                            chartDiv.resize()
                        });
                        document.getElementById(this.id).parentElement.onclick = function () {
                            chartDiv.resize();
                        };
                    } else {
                        this.isTable = true;
                        this.isChart = false;
                        this.showtableData = this.chartDivParams.chartsData;
                    }
                } else {
                    console.log('error');

                }
            }
        }
    }
</script>

<style>
    .edit {
        /*background: #5daf34;*/
        position: absolute;
        right: 5%;
        top: 3%;
        font-size: 14px;
        padding-right: 3px;
        box-sizing: border-box;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: inline-flex;
        cursor: pointer;
        z-index: 100;
    }

    .close {
        /*background: #5daf34;*/
        position: absolute;
        right: 0.5%;
        top: 3%;
        font-size: 14px;
        padding-right: 3px;
        box-sizing: border-box;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: inline-flex;
        cursor: pointer;
        z-index: 100;
    }
    .vue-draggable-handle {
        /*background: #5daf34;*/
        position: absolute;
        left: 0.5%;
        top: 1%;
        font-size: 14px;
        padding-right: 3px;
        box-sizing: border-box;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: inline-flex;
        cursor: pointer;
        z-index: 100;
    }

    .vue-draggable-handle:hover {
        color: #4060ff
    }
    .edit:hover {
        color: #4060ff
    }

    .close:hover {
        color: #4060ff
    }
    .el-main {
        line-height: 30px;
    }

</style>